<template>
	<div class="main_content">
		<div class="top_seach">
			<el-input v-model="input" placeholder="请输入内容" clearable style="width: 15%; margin:10px;" />
			<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
			<el-button class="addBnt" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
		</div>
		<div class="content_table">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column label="编号" width="70">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.id }}</span>
					</template>
				</el-table-column>
				<el-table-column label="用户头像" width="90">
					<template slot-scope="scope">
						<el-image style="width: 32px;height: 32px;" :src="'/api/file/'+scope.row.avatar"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="用户名" width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.userName }}</span>
					</template>
				</el-table-column>
				<el-table-column label="用户昵称" width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.nickname }}</span>
					</template>
				</el-table-column>
				<el-table-column label="用户身份" width="180">
					<template slot-scope="scope">
						<el-tag size="medium">{{ scope.row.role }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="手机号" width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.phone }}</span>
					</template>
				</el-table-column>
				<el-table-column label="电子邮件" width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.email }}</span>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.createTime }}</span>
					</template>
				</el-table-column>
				<el-table-column label="是否禁用" width="100">
					<el-switch v-model="scope.row.status === 0 ? true : false" 
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" v-if="scope.row.role == 'user'"
							:active-value="1"
							:inactive-value="0"
							@change="toDisable(scope.$index,scope.row)">
						</el-switch>
						<el-switch v-model="scope.row.status" v-else
							:active-value="1"
							:inactive-value="0"
							@change="toDisable(scope.$index,scope.row)" disabled>
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column label="重置密码" width="100">
					<template slot-scope="scope">
						<el-button size="mini" v-if="scope.row.role === 'user'"
						@click="openDialog(scope.$index, scope.row)" type="primary">
							重置密码
						</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="footer_page">
			<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
				layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
		</div>
		<EditorUser ref="editUser"></EditorUser>
		<AddUser ref="addUser"></AddUser>
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  width="30%"
		  :before-close="handleClose">
		  <el-input v-model="pwdinput" placeholder="请输入重置密码"></el-input>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="handleClose">取 消</el-button>
		    <el-button type="primary" @click="resetPasswords">确 定</el-button>
		  </span>
		</el-dialog>
		
	</div>

</template>

<script>
	import EditorUser from "../../components/backstage/EditorUser.vue"
	import AddUser from "../../components/backstage/AddUser.vue"
	import userApi from "@/api/user.js"
	export default {
		components: {
			EditorUser,
			AddUser
		},
		data() {
			return {
				total: 0,
				pageSize: 6,
				currentPage: 1,
				input: "",
				pwdinput:"",
				tableData: [],
				dialogVisible: false,
				pwdId:""
			}
		},
		methods: {
			handleEdit(index, row) { //编辑点击事件
				console.log(index, row);
				this.$refs.editUser.dialogFormVisible = true;
				this.$refs.editUser.form = JSON.parse(JSON.stringify(row));
			},
			handleAdd() {
				this.$refs.addUser.dialogFormVisible = true;
			},
			handleDelete(index, row) { //删除点击事件
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteUser(row),
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			async deleteUser(row) {
				const res = await userApi.deleteUser("/znUsers/deleteUser/" + row.id);
				this.UserAll();
			},
			async handleSearch() {
				this.UserAll();
			},
			async UserAll() {
				const res = await userApi.userInfo("/znUsers/UserAll", {
					input: this.input,
					pageId: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.tableData = res.data.records;
					this.total = res.data.total;
				}
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				this.UserAll();
			},
			async toDisable(index,row){
				const res = await userApi.toDisable("/znUsers/toDisable", {
					id: row.id,
					status: row.status
				});
				if(res.code == 200){
					this.UserAll();
					this.$message({
					    message: '修改成功',
					    type: 'success'
					});
				}
			},
			openDialog(index, row){
				this.dialogVisible = true;
				this.pwdId = row.id;
			},
			handleClose(){
				this.dialogVisible = false;
				this.pwdinput = "";
				this.pwdId = "";
			},
			async resetPasswords(index,row){
				const res = await userApi.resetPasswords("/znUsers/resetPasswords",{
					id: this.pwdId,
					password: this.pwdinput
				});
				if(res.code == 200){
					this.UserAll();
					this.dialogVisible = false;
					this.$message({
					    showClose: true,
					    message: '重置成功',
					    type: 'success'
					});
				}
			}
		},
		created() {
			this.UserAll()
		}
	}
</script>

<style scoped lang="scss">
	.main_content {
		height: 100%;

		.top_seach {
			height: 12%;
			position: relative;

			.addBnt {
				margin-top: 10px;
				position: absolute;
				left: 0%;
				bottom: 0%;
			}
		}

		.content_table {
			height: 78%;
		}

		.footer_page {
			height: 10%;
			position: relative;

			.el-pagination {
				position: absolute;
				right: 2%;
				bottom: 50%;
				transform: translateY(-50%);

			}
		}
	}
</style>